<template>
	<div class="withdrawals_page">
		<div class="header">
			<van-nav-bar
				title="提现"
				left-arrow
				@click-left="onClickLeft"
        right-text="积分明细"
        @click-right="onClickRight"
				/>
		</div>
        <div>
            <!-- 中间图 -->
            <div class="withdrawa_met">
                <img src="@/assets/caibao.png">
                <h2>{{currentIntegral}}</h2>
                <p>（可提现积分）</p>
            </div>
            <!-- 广播 -->
            <div class="withdrawa_tishi">
                <p>100积分兑换1元，每次至少兑换3000积分</p>
            </div>
            <!-- 积分提现 -->
            <div class="withdrawa_jifen">
                <h3>提现积分</h3>
                <p><img src="@/assets/qian.png">
                  <input type="text" placeholder="请输入提现积分"
                         v-model="integral_val" maxlength="4"

                  >
                  <span @click="all_click">全部</span></p>
            </div>
            <div class="clear"></div>
            <!-- 提现到 -->
            <div class="withdrawa_xian">
                <h3>支付宝账号信息</h3>

                <van-cell-group>
                    <van-field
                        v-model="xingming"
                        clearable
                        left-icon="manager"
                        placeholder="请输入真实姓名"
                        style="font-size:0.85rem"
                    />

                    <van-field
                        v-model="zhanghao"
                        left-icon="alipay"
                        style="font-size:0.85rem"
                        placeholder="请输入支付宝账号"
                    />
                </van-cell-group>
            </div>
            <div style="height:90px;background-color:#ffffff"></div>
            <!--底部-->
            <div class="footer_content">
                <div class="footer_one">
                    <p>兑现人民币<span>{{price}}</span>元</p>
                    <p style="color: #CCCCCC;font-weight: normal;font-size: 14px;">100积分等于1元</p>
                </div>
                <div class="footer_two">
                    <van-button round type="default" @click="Immediate">提现</van-button>
                </div>
            </div>
        </div>
	</div>
</template>
<script>
    import { Dialog } from 'vant';
	export default {
        data() {
            return {
                xingming:'',
                zhanghao:'',
                currentIntegral:0,
                integral_val:'',
                price:0
            };

        },
      watch:{
          'integral_val':function(e){
              console.log(e);
              this.price = this.integral_val/100;
          }
      },
        mounted:function(){
            const that = this;
            let local_user = localStorage.getItem("user");
            if (local_user != undefined && local_user != "undefined") {
                let user = JSON.parse(local_user);
                that.user = user;
                that.get_interal();
            } else {
                that.show_top = false;
            }
        },
        methods:{
            onClickLeft(){
                this.$router.back(-1);
            },
            onClickRight(){
                this.$router.push({
                    path: "/credit"
                });
            },
            all_click(){
              this.integral_val = this.currentIntegral;
            },
            get_interal() {
                const that = this;
                that.$sendRequest("/index/get_interal", "userId=" + that.user.userId)
                    .then(function(res) {
                        console.log(res);
                        if (res.data.code == 0) {
                          console.log(res.data);
                          that.currentIntegral = res.data.result.currentIntegral;
                        }
                    });
            },
            Immediate(){
                Dialog.confirm({
                    title: '易分',
                    message: '确认要提现吗?'
                }).then(() => {
                    const that = this;
                    if(that.user.userId == '' || that.user.userId==undefined || that.user.userId=='undefined'){
                        this.$toast("请重新登录");
                        return false;
                    }
                    if(that.integral_val == '' || that.integral_val==0){
                        this.$toast("请输入提现积分");
                        return false;
                    }
                    if(that.integral_val <=3000){
                        this.$toast("每次至少兑换3000积分");
                        return false;
                    }
                    if(that.xingming == '' ){
                        this.$toast("请输入支付宝姓名");
                        return false;
                    }
                    if(that.zhanghao == '' ){
                        this.$toast("请输入支付宝账号");
                        return false;
                    }

                    let p = "userId="+that.user.userId+"&integral="+that.integral_val+"&zfbName="+that.xingming+"&zfbAccount="+that.zhanghao;
                    that.$sendRequest("/integra/withdrawal", p)
                        .then(function(res) {
                            console.log(res);
                            if (res.data.code == 0) {
                                that.$router.push({
                                    path: "/myself"
                                });
                            }else{
                                that.$toast(res.data.msg);
                            }
                        });
                }).catch(() => {
                    // on cancel
                });

            }
        }
    };
</script>
<style scoped="scoped">
    .clear{
        clear: both;
    }
    .withdrawa_met{
        width: 100%;
        background-color: #FFFFFF;
        padding-bottom:0.8rem ;
        margin-top: 0.1rem;
    }
    .withdrawa_met img{
        width: 45%;
        padding-top: 1rem;
    }
    .withdrawa_met h2{
        color: #FF4242;
        font-size: 3.2rem;
        margin: 0;
        margin-top: -0.6rem;
    }
    .withdrawa_met p{
        color: #666666;
        margin: 0;
    }
    .withdrawa_tishi{
        width: 100%;
        background-color: #f6f6f6;
        height: 4vh;
    }
    .withdrawa_tishi p{
        text-align: left;
        padding-left: 1.3rem;
        line-height: 4vh;
        font-size: 0.9rem;
        color: #666666;
        margin: 0;
    }
    .withdrawa_jifen {
        box-sizing: border-box;
        padding: 0 1.2rem;
        width: 100%;
        float: left;
        background-color: #FFFFFF;
    }
    .withdrawa_jifen h3{
        text-align: left;
        margin-bottom: 1vh;
        padding-bottom: 0.45rem;
        font-size: 1rem;
    }
    .withdrawa_jifen p{
        margin: 0;
        text-align: left;
        display: flex;
        align-items: center;
    }
    .withdrawa_jifen img{
        width: 12%;
        padding-right: 0.5rem;
    }
    .withdrawa_jifen input{
        border: none;
        width:63vw ;
        /* background-color: red; */
        font-size: 0.95rem;
    }
    .withdrawa_jifen span{
        margin-right: 2vw;
        color: #4C9FFD;
        font-size: 1rem;
    }
    .withdrawa_xian {
        margin-top: 0.4rem;
        box-sizing: border-box;
        padding: 0 1.2rem;
        width: 100%;
        background-color: #FFFFFF;
    }
    .withdrawa_xian h3{
        text-align: left;
        padding-top: 1.2rem;
        margin-bottom: 0;
        margin-top: 0;
        font-size: 1rem;
        padding-bottom: 1rem;
    }
    .withdrawa_xian p{
        margin: 0;
        float: left;
        text-align: left;
        display: flex;
    }
    .withdrawa_xian img{
        width: 23%;
        padding: 0 0.4rem;
        padding-left: 0.7rem;
    }
    .withdrawa_xian span{
        padding-top: 0.3rem;
        font-size: 1.3rem;
    }
    .withdrawa_xian >>> .van-icon-manager{
        font-size: 1.6rem;
        color: #4C9FFD;
    }
    .withdrawa_xian >>> .van-icon-alipay{
        font-size: 1.6rem;
        color: #4C9FFD;
    }
	.footer_content{
	    position: fixed;
	    width: 100%;
	    padding: 1px;
	    bottom: 0;
		align-items: center;
		background: #FFFFFF;

		display: flex;
		justify-content: space-around;

	}
	.footer_one p{
		font-size: 16px;
		font-weight: bold;
		color: #000000;
	}
	.footer_one p span{
		color: rgb(255,66,66);
	}
	.footer_content >>> .van-button__text{
		padding: 0 5vh;
	}
	.footer_content >>>.van-button{
		background: #4C9FFD;
		color: #FFFFFF;
	}
    .header >>> .van-icon-arrow-left{
        color: #2c3e50;
    }
    .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after {
        border: none;
    }
</style>

